<div id="admin-user-detail">
  <div class="col-lg-12">
    <!-- main panel -->
    <section class="panel-container">
      <!-- Panel content -->
      <section class="panel-content">
        <!-- tabs --->
        <md-tabs md-dynamic-height md-border-bottom>
          <!-- User -->
          <md-tab label="{{ 'ADMIN_USER_EDIT_TITLE' | translate }}" >
            <md-content class="md-padding">
              <!-- Form -->
              <form name="form" ng-submit="edit()" novalidate>
                <md-content layout-padding>
                  <md-input-container class="md-block" flex-gt-sm>
                    <label translate="ADMIN_USER_NAME"></label>
                    <input type="text" name="userName" ng-model="user.name" required>
                    <div ng-messages="form.userName.$error" ng-if="form.userName.$dirty">
                      <div ng-message="required" translate="FIELD_IS_REQUIRED"></div>
                    </div>
                  </md-input-container>
                  <md-input-container class="md-block" flex-gt-sm>
                    <label translate="ADMIN_USER_EMAIL"></label>
                    <input type="text" name="email" ng-model="user.email" required>
                    <div ng-messages="form.email.$error" ng-if="form.email.$dirty">
                      <div ng-message="required" translate="FIELD_IS_REQUIRED"></div>
                    </div>
                  </md-input-container>
                  <md-input-container class="md-block" flex-gt-sm>
                    <label translate="ADMIN_USER_PHONE"></label>
                    <input type="text" name="phone" ng-model="user.phone" required>
                    <div ng-messages="form.phone.$error" ng-if="form.phone.$dirty">
                      <div ng-message="required" translate="FIELD_IS_REQUIRED"></div>
                    </div>
                  </md-input-container>
                  <div layout="row" ng-style="{'padding': 0}">
                    <md-input-container flex="20" class="md-block">
                      <label>{{ 'ADMIN_USER_MESSAGE_TYPE' | translate }}</label>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-sm>
                      <md-checkbox ng-model="user.enableEmail" aria-label="checked checkbox">
                        {{ 'ADMIN_USER_ENABLE_EMAIL' | translate }}
                      </md-checkbox>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-sm>
                      <md-checkbox ng-model="user.enablePhone" aria-label="checked checkbox">
                        {{ 'ADMIN_USER_ENABLE_PHONE' | translate }}
                      </md-checkbox>
                    </md-input-container>
                  </div>
                  <div layout="row" ng-style="{'padding': 0}">
                    <md-input-container flex="20" class="md-block">
                      <label>{{ 'ADMIN_USER_IS_UNIVERSAL' | translate }}</label>
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-sm>
                      <md-checkbox ng-model="user.universal"> {{ 'ADMIN_USER_UNIVERSAL' | translate }} </md-checkbox>
                    </md-input-container>
                  </div>
                  <div layout="row" ng-style="{'padding': 0}">
                    <md-input-container flex="20" class="md-block">
                      <label>{{ 'ADMIN_USER_RULE_LEVEL' | translate }}</label>
                    </md-input-container>
                    <md-input-container flex="80" class="md-block">
                      <md-radio-group ng-model="user.ruleLevel" layout="row">
                        <md-radio-button ng-value="0"> {{ 'ADMIN_USER_RULE_LEVEL_LOW' | translate }} </md-radio-button>
                        <md-radio-button ng-value="1"> {{ 'ADMIN_USER_RULE_LEVEL_MIDDLE' | translate }} </md-radio-button>
                        <md-radio-button ng-value="2"> {{ 'ADMIN_USER_RULE_LEVEL_HIGH' | translate }} </md-radio-button>
                      </md-radio-group>
                    </md-input-container>
                  </div>
                  <md-input-container>
                    <md-button class="md-raised" aria-label="Save User" type="submit" ng-disabled="form.$invalid">
                      {{ 'SAVE' | translate }}
                    </md-button>
                    <md-button class="md-raised md-warn" aria-label="Delete User" type="button" ng-click="deleteUser($event)">
                      {{ 'DELETE' | translate }}
                    </md-button>
                  </md-input-container>
                </md-content>
              </form>
              <!-- ./Form -->
            </md-content>
          </md-tab>
          <!-- ./Rules -->
          <md-tab label="{{ 'ADMIN_USER_PROJECTS_TITLE' | translate }}" ng-click="loadUserProjects()">
            <md-content class="md-padding">
              <!-- Table -->
              <div class="table-responsive">
                <table class="table">
                  <tbody>
                  <md-progress-linear md-mode="indeterminate" ng-if="!projects"></md-progress-linear>
                    <tr ng-if="!projects || !projects.length">
                      <td colspan="3"> {{ 'NOT_FOUND_ANY_RESULT' | translate }} </td>
                    </tr>
                    <tr ng-repeat="project in projects">
                      <td ng-bind="$index+1" class="td50"></td>
                      <td>
                        <a ng-bind="project.name" ui-sref='banshee.admin.team.project.detail({id: project.id,teamID:project.teamID})' class="md-body-2"></a>
                      </td>
                      <td class="text-right">
                        <a ui-sref='banshee.admin.team.project.detail({id: project.id,teamID:project.teamID})'>
                          <md-button class="md-raised md-primary md-mini" aria-label="edit project">
                            <i class="fa fa-pencil"></i>
                          </md-button>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- ./Table -->
            </md-content>
          </md-tab>
          <!-- ./Users -->
        </md-tabs>
        <!-- ./tabs -->
      </section>
      <!-- ./Panel content -->
    </section>
    <!-- Metric panel -->
  </div>
</div>
